<template>
  <div id="main" v-loading="loading">
    <!-- <div slot="header" class="clearfix">
      <h2 class="aline-l">企业认证</h2>
    </div> -->
    <div class="box-card margin-t10 boxBlock" v-if="approve.auditResult">
      驳回原因：
      {{ approve.auditResult }}
    </div>
    <div class="box-card margin-t10 boxBlock" v-if="sm"> 
      <div class="dialogItem" v-if="isAcive != 5">
        <span>实名认证</span>
      </div>
      <el-row
        type="flex"
        justify="space-around"
        class="aline-c"
        v-if="isAcive != 5"
      >
        <div v-for="item in tabsData" :key="item.id">
          <img
            class="img_sm"
            v-if="item.id != 1"
            :src="isAcive > item.id || item.id == isAcive ? isImg : Img"
            alt=""
          />
          <div
            :class="[
              isAcive > item.id || item.id == isAcive ? 'smActive' : '',
              'bor_sm',
              'pointer',
            ]"
            @click="item.id == 5 ? '' : toNum(item.id)"
          >
            <div class="rad_sm">{{ item.id }}</div>
            <div>
              {{ item.name }}
            </div>
          </div>
        </div>
      </el-row>
      <h3 class="aline-c font25 font-w6" v-if="isAcive != 5">
        {{ tabsData[isAcive - 1].name }}
      </h3>

      <el-form
        class="padding-r35"
        label-width="140px"
        label-position="left"
        :model="approve"
        ref="approve"
        :rules="regFormRules"
      >
        <div v-if="isAcive == 1">
          <el-form-item
            label="营业执照"
            class="wid-4 margin-b35 margin-t35 aline-c"
            prop="businessLicensePic"
          >
            <el-upload
              action="#"
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange3"
              drag
            >
              <img
                v-if="approve.businessLicensePicUrl"
                :src="approve.businessLicensePicUrl"
                class="avatar"
              />
              <i
                class="el-icon-upload"
                v-if="!approve.businessLicensePicUrl"
              ></i>
              <div
                class="el-upload__text"
                v-if="!approve.businessLicensePicUrl"
              >
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div
                class="el-upload__tip text-gray"
                slot="tip"
                v-if="!approve.businessLicensePicUrl"
              >
                只能上传jpg/png文件，且不超过3M
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item label="公司类型" prop="enterpriseType" class="wid-9">
            <el-radio-group v-model="approve.enterpriseType">
              <el-radio label="0">有限责任公司</el-radio>
              <el-radio label="1">个体工商户</el-radio>
              <el-radio label="2">个人独资企业</el-radio>
              <el-radio label="3">合伙企业</el-radio>
              <el-radio label="4">股份有限公司</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="企业注册地"
            prop="registeredAddress"
            class="wid-7 select10"
          >
            <el-select
              size="small"
              v-model="approve.registeredAddress"
              placeholder="请选择企业注册地"
              filterable
            >
              <el-option
                v-for="type in nation"
                :label="type.label"
                :value="type.value"
                :key="type.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="注册地址详情"
            prop="registeredAddressInfo"
            class="wid-7"
          >
            <el-input
              size="small"
              v-model="approve.registeredAddressInfo"
              auto-complete="off"
              placeholder="请输入注册地址详情"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="注册地邮政编码"
            prop="registeredAddressZipCode"
            class="wid-7"
          >
            <el-input
              size="small"
              v-model="approve.registeredAddressZipCode"
              auto-complete="off"
              placeholder="请输入注册地邮政编码"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="实际经营地址"
            prop="manageAddress"
            class="wid-7 select10"
          >
            <el-select
              size="small"
              v-model="approve.manageAddress"
              placeholder="请选择实际经营地址"
              filterable
            >
              <el-option
                v-for="type in nation"
                :label="type.label"
                :value="type.value"
                :key="type.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="实际经营地址详情"
            prop="manageAddressInfo"
            class="wid-7"
          >
            <el-input
              size="small"
              v-model="approve.manageAddressInfo"
              auto-complete="off"
              placeholder="请输入实际经营地址详情"
            ></el-input>
            <i class="el-icon-warning-outline font12 text-gray">
              实际经营地址请具体到门牌号
            </i>
          </el-form-item>
          <el-form-item label="雇员人数" prop="employeeNumber" class="wid-7">
            <el-input
              size="small"
              v-model="approve.employeeNumber"
              auto-complete="off"
              placeholder="请输入雇员人数"
            ></el-input>
          </el-form-item>
          <el-form-item label="经营场所类型" prop="operationType" class="wid-7">
            <el-input
              size="small"
              v-model="approve.operationType"
              auto-complete="off"
              placeholder="请输入经营场所类型"
            ></el-input>
          </el-form-item>
        </div>
        <div v-if="isAcive == 2">
          <el-form-item label="您的身份" prop="identityType" class="wid-9">
            <el-radio-group v-model="approve.identityType">
              <el-radio label="0">企业法人代表</el-radio>
              <el-radio label="1">被授权人</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="国籍" prop="nationality" class="wid-7 select10">
            <el-select
              size="small"
              v-model="approve.nationality"
              placeholder="请选择国籍"
              filterable
            >
              <el-option
                v-for="type in nation"
                :label="type.label"
                :value="type.value"
                :key="type.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="证件类型" prop="certificateType" class="wid-9">
            <el-radio-group v-model="approve.certificateType">
              <el-radio label="0">身份证</el-radio>
              <el-radio label="1">护照</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            label="身份证正面"
            class="wid-4 margin-b35 margin-t35 aline-c"
            prop="certificateFrontPic"
            v-if="approve.certificateType == 0"
          >
            <el-upload
              action="#"
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange1"
              drag
            >
              <img
                v-if="approve.certificateFrontPicUrl"
                :src="approve.certificateFrontPicUrl"
                class="avatar"
              />
              <i
                class="el-icon-upload"
                v-if="!approve.certificateFrontPicUrl"
              ></i>
              <div
                class="el-upload__text"
                v-if="!approve.certificateFrontPicUrl"
              >
                <em>选择身份证正面，</em>或将文件拖到此处
              </div>
              <div
                class="el-upload__tip text-gray"
                slot="tip"
                v-if="!approve.certificateFrontPicUrl"
              >
                只能上传jpg/png文件，且不超过3M
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item
            label="身份证反面"
            class="wid-4 margin-b35 margin-t35 aline-c"
            prop="certificateReversePic"
            v-if="approve.certificateType == 0"
          >
            <el-upload
              action="#"
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange2"
              drag
            >
              <img
                v-if="approve.certificateReversePicUrl"
                :src="approve.certificateReversePicUrl"
                class="avatar"
              />
              <i
                class="el-icon-upload"
                v-if="!approve.certificateReversePicUrl"
              ></i>
              <div
                class="el-upload__text"
                v-if="!approve.certificateReversePicUrl"
              >
                <em>选择身份证反面，</em>或将文件拖到此处
              </div>
              <div
                class="el-upload__tip text-gray"
                slot="tip"
                v-if="!approve.certificateReversePicUrl"
              >
                只能上传jpg/png文件，且不超过3M
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item
            label="法代护照照片"
            class="wid-4 margin-b35 margin-t35 aline-c"
            prop="certificatePassportPic"
            v-if="approve.certificateType == 1"
          >
            <el-upload
              action="#"
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange5"
              drag
            >
              <img
                v-if="approve.certificatePassportPicUrl"
                :src="approve.certificatePassportPicUrl"
                class="avatar"
              />

              <i
                class="el-icon-upload"
                v-if="!approve.certificatePassportPicUrl"
              ></i>
              <div
                class="el-upload__text"
                v-if="!approve.certificatePassportPicUrl"
              >
                <em>选择护照照片，</em>或将文件拖到此处
              </div>
              <div
                class="el-upload__tip text-gray"
                slot="tip"
                v-if="!approve.certificatePassportPicUrl"
              >
                只能上传jpg/png文件，且不超过3M
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item label="证件姓名" prop="certificateName" class="wid-7">
            <el-input
              size="small"
              v-model="approve.certificateName"
              auto-complete="off"
              placeholder="请输入证件姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="证件号码" prop="certificateNumber" class="wid-7">
            <el-input
              size="small"
              v-model="approve.certificateNumber"
              auto-complete="off"
              placeholder="请输入证件号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone" class="wid-7">
            <el-input
              size="small"
              v-model="approve.phone"
              auto-complete="off"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" class="wid-7">
            <el-input
              size="small"
              v-model="approve.email"
              auto-complete="off"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
        </div>
        <div v-if="isAcive == 3">
          <el-form-item class="wid-7 aline-l">
            <div class=" font12">
              根据所适用法律规定，我们需向责公司收集受益所有人信息。
            </div>
            <div class=" font-w6">
              受益所有人：实际管控、管理公司并享有公司最终收益的自然人。具体是指，直接或间接通过股权、授权或其他形式法律安排拥有公司25%以上股权、投票权的自然人。
            </div>
          </el-form-item>
          <el-form-item class="wid-7 aline-l">
            <div class=" font18 font-w6">
              1、法人代表【xxx】是否为受益所有人？
            </div>
            <el-radio-group
              v-model="approve.legalIsBeneficiary"
              class=""
            >
              <el-radio label="0">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item class="wid-7 aline-l">
            <div class=" font18 font-w6">
              2、贵公司是否存在其他受益所有人？
            </div>
            <el-radio-group
              v-model="approve.isExistOtherBeneficiary"
              class=""
            >
              <el-radio label="0">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>

            <i class="el-icon-warning-outline font12 text-gray">
              {{ "若持股比例<25%，则非受益所有人" }}
            </i>
          </el-form-item>

          <el-form-item
            label="身份证正面"
            class="wid-4 margin-b35 margin-t35 aline-c"
            prop="beneficiaryCardFrontPic"
            v-if="approve.isExistOtherBeneficiary == 0"
          >
            <el-upload
              action="#"
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange6"
              drag
            >
              <img
                v-if="approve.beneficiaryCardFrontPicUrl"
                :src="approve.beneficiaryCardFrontPicUrl"
                class="avatar"
              />
              <i
                class="el-icon-upload"
                v-if="!approve.beneficiaryCardFrontPicUrl"
              ></i>
              <div
                class="el-upload__text"
                v-if="!approve.beneficiaryCardFrontPicUrl"
              >
                <em>选择身份证正面，</em>或将文件拖到此处
              </div>
              <div
                class="el-upload__tip text-gray"
                slot="tip"
                v-if="!approve.beneficiaryCardFrontPicUrl"
              >
                只能上传jpg/png文件，且不超过3M
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item
            label="身份证反面"
            class="wid-4 margin-b35 margin-t35 aline-c"
            prop="beneficiaryCardReversePic"
            v-if="approve.isExistOtherBeneficiary == 0"
          >
            <el-upload
              action="#"
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange7"
              drag
            >
              <img
                v-if="approve.beneficiaryCardReversePicUrl"
                :src="approve.beneficiaryCardReversePicUrl"
                class="avatar"
              />
              <i
                class="el-icon-upload"
                v-if="!approve.beneficiaryCardReversePicUrl"
              ></i>
              <div
                class="el-upload__text"
                v-if="!approve.beneficiaryCardReversePicUrl"
              >
                <em>选择身份证反面，</em>或将文件拖到此处
              </div>
              <div
                class="el-upload__tip text-gray"
                slot="tip"
                v-if="!approve.beneficiaryCardReversePicUrl"
              >
                只能上传jpg/png文件，且不超过3M
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item
            label="手持身份证"
            class="wid-4 margin-b35 margin-t35 aline-c"
            prop="beneficiaryHandPic"
            v-if="approve.isExistOtherBeneficiary == 0"
          >
            <el-upload
              action="#"
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange8"
              drag
            >
              <img
                v-if="approve.beneficiaryHandPicUrl"
                :src="approve.beneficiaryHandPicUrl"
                class="avatar"
              />

              <i
                class="el-icon-upload"
                v-if="!approve.beneficiaryHandPicUrl"
              ></i>
              <div
                class="el-upload__text"
                v-if="!approve.beneficiaryHandPicUrl"
              >
                <em>选择法人代表手持[身份证]照片，</em>或将文件拖到此处
              </div>
              <div
                class="el-upload__tip text-gray"
                slot="tip"
                v-if="!approve.beneficiaryHandPicUrl"
              >
                只能上传jpg/png文件，且不超过3M
              </div>
            </el-upload>
            <i
              class="el-icon-warning-outline font12 text-gray dl aline-l margin-t10"
            >
              1.请确保证脸部不被遮挡，证件上所有信息完整清晰
            </i>
            <i
              class="el-icon-warning-outline font12 text-gray dl aline-l margin-t10"
            >
              2.支持PDF、JPG、JPEG、PNG格式
            </i>
            <i
              class="el-icon-warning-outline font12 text-gray dl aline-l margin-t10"
            >
              3.文件大小不超过20M
            </i>
          </el-form-item>

          <el-form-item
            label="证件姓名"
            prop="beneficiaryName"
            class="wid-7"
            v-if="approve.isExistOtherBeneficiary == 0"
          >
            <el-input
              size="small"
              v-model="approve.beneficiaryName"
              auto-complete="off"
              placeholder="请输入证件姓名"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="证件号码"
            prop="beneficiaryNumber"
            class="wid-7"
            v-if="approve.isExistOtherBeneficiary == 0"
          >
            <el-input
              size="small"
              v-model="approve.beneficiaryNumber"
              auto-complete="off"
              placeholder="请输入证件号码"
            ></el-input>
          </el-form-item>
        </div>
        <div v-if="isAcive == 4">
          <h3 class="aline-c font20 font-w6">
            为确认开户为法人代表本人意愿，请上传法人代表手持[身份证]照片
          </h3>
          <el-form-item
            label="手持身份证"
            class="wid-4 margin-b35 margin-t35 aline-c"
            prop="lawGenerationHandPic"
          >
            <el-upload
              action="#"
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange4"
              drag
            >
              <img
                v-if="approve.lawGenerationHandPicUrl"
                :src="approve.lawGenerationHandPicUrl"
                class="avatar"
              />
              <i
                class="el-icon-upload"
                v-if="!approve.lawGenerationHandPicUrl"
              ></i>
              <div
                class="el-upload__text"
                v-if="!approve.lawGenerationHandPicUrl"
              >
                <em>选择法人代表手持[身份证]照片，</em>或将文件拖到此处
              </div>
              <div
                class="el-upload__tip text-gray"
                slot="tip"
                v-if="!approve.lawGenerationHandPicUrl"
              >
                只能上传jpg/png文件，且不超过3M
              </div>
            </el-upload>
            <i
              class="el-icon-warning-outline font12 text-gray dl aline-l margin-t10"
            >
              1.请确保证脸部不被遮挡，证件上所有信息完整清晰
            </i>
            <i
              class="el-icon-warning-outline font12 text-gray dl aline-l margin-t10"
            >
              2.支持PDF、JPG、JPEG、PNG格式
            </i>
            <i
              class="el-icon-warning-outline font12 text-gray dl aline-l margin-t10"
            >
              3.文件大小不超过20M
            </i>
          </el-form-item>

          <!-- <el-form-item label="" class="wid-7">
            <el-radio v-model="radio">
              我确认以上信息填写准确无误，我已经悉知且同意《海淘国际用卡协议》和《海淘国际用户协议》
            </el-radio>
          </el-form-item> -->
        </div>
        <div class="aline-c" v-if="isAcive == 5">
          <div v-if="isApprove">
            <h3 class="aline-c font20 font-w6 margin-t55">
              您的实名认证信息已提交
            </h3>
            <img class="A_img" src="~@/assets/img/A_bg.png" alt="" />

            <div class="font12 text-gray dl margin-t20">
              您的实名认证信息已提交，预计需要1个工作日审核完毕
            </div>
          </div>
          <div v-else>
            <h3 class="aline-c font20 font-w6 margin-t55">
              您的实名认证信息已通过
            </h3>
            <img class="A_img" src="~@/assets/img/AD_bg.png" alt="" />
          </div>
        </div>

        <el-form-item class="wid-8 aline-c margin-t35">
          <el-button
            type="primary"
            @click="AddCom(-1)"
            v-if="isAcive != 1 && isAcive != 5"
          >
            上一步
          </el-button>
          <!-- <el-button @click="SaveCom" v-if="isAcive != 5"> 保存 </el-button> -->
          <el-button
            type="primary"
            @click="AddCom(1)"
            v-if="isAcive != 5 && isAcive != 4"
          >
            下一步
          </el-button>
          <el-button
            type="primary"
            @click="refer()"
            v-if="isAcive == 4"
            :key="1"
            :disabled="disableds"
          >
            确认提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box-card margin-t10 boxBlock" v-else> 
      <div  class="dialogItem" > 
        <span>企业认证</span> 
      </div>
      <el-tabs v-model="approve.businessLicenseType" style="margin-top:10px"> 
        <el-tab-pane
          v-for="item in tabsList"
          :key="item.id"
          :label="item.name"
          :name="item.id"
        >
          <el-form
            class="padding-r35"
            label-width="100px"
            label-position="right"
            style="padding: 20px 0;"
            :model="approve"
            ref="approve"
            :rules="regFormRules"
          >
            <el-form-item
              label="企业中文名称"
              class="wid-9"
              prop="enterpriseNameCn"
            >
              
              <div>
                <el-input v-model="approve.enterpriseNameCn" style="width: 400px;"></el-input>
              </div>

              <el-tag type="danger">
                <i class="el-icon-warning-outline font12">
                  请确保您的企业名称和企业文件上的注册名称一致，开始认证流程后无法修改
                </i> 
              </el-tag> 
              
            </el-form-item>
            <el-form-item
              label="企业英文名称"
              class="wid-9"
              prop="enterpriseNameEn"
            >
              <el-input v-model="approve.enterpriseNameEn" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="是否为上市公司" prop="isMarket" class="wid-9">
              <el-radio-group v-model="approve.isMarket">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="wid-7">
              <div class=" ">
                感谢您选择我们，为了更顺利地激活您的账户，请帮助我们验证您的实名信息
                接下来您将需要提交的材科有：
              </div>
              <div class="">
                <i class="el-icon-tickets"></i> 公司注册相关文件
              </div>
              <div class="">
                <i class="el-icon-tickets"></i> 被授权人身份证件(若有）
              </div>
              <div class="">
                <i class="el-icon-tickets"></i> 公司法代身份证件
              </div>
              <div class="">
                <i class="el-icon-tickets"></i> 公司受益所有人身份证件
              </div>
              <div class="">
                <i class="el-icon-tickets"></i> 法代手持身份证件照片
              </div>
            </el-form-item>

            <el-form-item class="wid-8 aline-c">
              <el-button type="primary" @click="changeCom">
                开始实名认证
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <codeChoose ref="codeRef" :fromType="verType" @setParam="getParam" ></codeChoose>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import codeChoose from '@/components/codeChoose.vue'
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  phoneReg,
  emailReg,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  getUrl,
  reqJson 
} from "../../api/axiosFun";
import isImg from "../../assets/img/isArr.png";
import Img from "../../assets/img/arr.png";
import { nation, getNation } from "../../utils/cardData";
export default {
  data() {
    return {
      sm: false,
      isApprove: true,
      isImg: isImg,
      Img: Img,
      userInfo: null,
      baseURL: baseURL,
      loading: false,
      disableds: false,
      isAcive: 1,
      tabsData: [
        { id: 1, name: "填写企业基本信息" },
        { id: 2, name: "填写企业法人代表信息" },
        { id: 3, name: "填写受益所有人信息" },
        { id: 4, name: "法人代表意愿确认" },
        { id: 5, name: "证件验证" },
      ],
      authRecord: null,
      approve: {
        certificateFrontPic: [],
        certificateReversePic: [],
        lawGenerationHandPic: [],
        businessLicensePic: [],
        certificatePassportPic: [],
        beneficiaryCardFrontPic: [],
        beneficiaryCardReversePic: [],
        beneficiaryHandPic: [],
        certificateFrontPicUrl: null,
        certificateReversePicUrl: null,
        lawGenerationHandPicUrl: null,
        businessLicensePicUrl: null,
        certificatePassportPicUrl: null,
        beneficiaryCardFrontPicUrl: null,
        beneficiaryCardReversePicUrl: null,
        beneficiaryHandPicUrl: null,
        enterpriseNameEn: "",
        enterpriseNameCn: "",
        businessLicenseType: "0",
        isMarket: "1",
        enterpriseType: "0",
        registeredAddress: "",
        registeredAddressInfo: "",
        registeredAddressZipCode: "",
        manageAddress: "",
        manageAddressInfo: "",
        employeeNumber: "",
        operationType: "",
        identityType: "0",
        nationality: "",
        certificateType: "0",
        certificateName: "",
        certificateNumber: "",
        phone: "",
        email: "",
        legalIsBeneficiary: "0",
        isExistOtherBeneficiary: "1",
        beneficiaryName: "",
        beneficiaryNumber: "",
      },
      formImg: {
        businessLicensePic: "",
        lawGenerationHandPic: "",
        certificateFrontPic: "",
        certificateReversePic: "",
        certificatePassportPic: "",
        beneficiaryCardFrontPic: "",
        beneficiaryCardReversePic: "",
        beneficiaryHandPic: "",
      },
      tabsList: [
        { id: "0", name: "香港营业执照" },
        { id: "1", name: "大陆营业执照" },
        { id: "2", name: "海外营业执照" },
      ],
      regFormRules: {
        phone: [
          { message: "请输入手机号", trigger: "blur" },
          {
            pattern: phoneReg,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        registeredAddressZipCode: [
          { message: "请输入邮编", trigger: "blur" },
          // {
          //   pattern: /^\d+$/,
          //   message: "请输入正确的邮编",
          //   trigger: "blur",
          // },
        ],
        employeeNumber: [
          { message: "请输入雇员人数", trigger: "blur" },
          {
            pattern: /^\d+$/,
            message: "请输入正确的雇员人数",
            trigger: "blur",
          },
        ],
        certificateNumber: [
          { message: "请输入身份证号码", trigger: "blur" },
          {
            pattern:
              /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "请输入正确的身份证号码",
            trigger: "blur",
          },
        ],
        beneficiaryNumber: [
          { message: "请输入身份证号码", trigger: "blur" },
          {
            pattern:
              /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "请输入正确的身份证号码",
            trigger: "blur",
          },
        ],
        email: [
          { message: "请输入邮箱", trigger: "blur" },
          {
            pattern: emailReg,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
      },
      dentialState: null,
      nation: nation,
      headers:'',
      verArry:[],
      verType:'',
      curItem:'', 
      fd:''
    };
  },
    // 注册组件
  components: { 
    codeChoose
  },
  created() {
    this.getInfo();
    this.companyInfo();
  },
  computed: {
    ...mapGetters(["getUser"]),
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
    },
  },
  methods: {
    toNum(id) {
      this.isAcive = id;
    },
    AddCom(num) {
      this.isAcive = this.isAcive + num;
    },
    SaveCom() {},
    getInfo() {
      service
        .get("/api/photon/getUserInfo", {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.userInfo = res.data;
            this.$store.commit("user", JSON.stringify(res.data));
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    changeCom() {
      if (this.approve.enterpriseNameCn && this.approve.enterpriseNameEn) {
        this.sm = true;
      } else {
        this.$message.error("请填写公司名称");
      }
    },
    companyInfo() {
      service
        .get("/api/photon/getAuthRecordKyc", {})
        .then((res) => { 
          if (res.code == 0) {
            if (res.data.status == 1) {
              this.sm = true;
              this.isAcive = 5;
              this.isApprove = false;
            } else if (res.data.status == 0) {
              this.sm = true;
              this.isAcive = 5;
            } else {
              this.kInfo(res.data);
            } 
            this.disableds = false; 
          } else { 
            this.disableds = false;
          }
        })
        .catch((err) => {
          this.disableds = false;
          this.$message.error(err);
        });
    },
    kInfo(data) {
      this.authRecord = data;
      this.approve = {
        auditResult: data.auditResult,
        certificateFrontPic: [],
        certificateReversePic: [],
        lawGenerationHandPic: [],
        businessLicensePic: [],
        certificatePassportPic: [],
        beneficiaryCardFrontPic: [],
        beneficiaryCardReversePic: [],
        beneficiaryHandPic: [],
        certificateFrontPicUrl: null,
        certificateReversePicUrl: null,
        lawGenerationHandPicUrl: null,
        businessLicensePicUrl: null,
        certificatePassportPicUrl: null,
        beneficiaryCardFrontPicUrl: null,
        beneficiaryCardReversePicUrl: null,
        beneficiaryHandPicUrl: null,
        enterpriseNameEn: data.enterpriseNameEn,
        enterpriseNameCn: data.enterpriseNameCn,
        businessLicenseType: data.businessLicenseType,
        isMarket: data.isMarket,
        enterpriseType: data.enterpriseType,
        registeredAddress: data.registeredAddress,
        registeredAddressInfo: data.registeredAddressInfo,
        registeredAddressZipCode: data.registeredAddressZipCode,
        manageAddress: data.manageAddress,
        manageAddressInfo: data.manageAddressInfo,
        employeeNumber: data.employeeNumber,
        operationType: data.operationType,
        identityType: data.identityType,
        nationality: data.nationality,
        certificateType: data.certificateType,
        certificateName: data.certificateName,
        certificateNumber: data.certificateNumber,
        phone: data.phone,
        email: data.email,
        legalIsBeneficiary: data.legalIsBeneficiary,
        isExistOtherBeneficiary: data.isExistOtherBeneficiary,
        beneficiaryName: data.beneficiaryName,
        beneficiaryNumber: data.beneficiaryNumber,
      };
    },
    handleChange1(files, fileList) {
      const isJPG = files.raw.type == "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传图片格式不符合！");
        return;
      }

      if (files.size > 1024 * 1024 * 3) {
        this.$message.error("上传图片不能超过3M！");
        return;
      }
      this.approve.certificateFrontPicUrl = URL.createObjectURL(files.raw);
      this.formImg.certificateFrontPic = files.raw;
    },
    handleChange2(files, fileList) {
      const isJPG = files.raw.type == "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传图片格式不符合！");
        return;
      }
      if (files.size > 1024 * 1024 * 3) {
        this.$message.error("上传图片不能超过3M！");
        return;
      }

      this.approve.certificateReversePicUrl = URL.createObjectURL(files.raw);
      this.formImg.certificateReversePic = files.raw;
    },
    handleChange3(files, fileList) {
      const isJPG = files.raw.type == "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传图片格式不符合！");
        return;
      }
      if (files.size > 1024 * 1024 * 3) {
        this.$message.error("上传图片不能超过3M！");
        return;
      }
      this.approve.businessLicensePicUrl = URL.createObjectURL(files.raw);
      this.formImg.businessLicensePic = files.raw;
    },
    handleChange4(files, fileList) {
      const isJPG = files.raw.type == "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传图片格式不符合！");
        return;
      }
      if (files.size > 1024 * 1024 * 3) {
        this.$message.error("上传图片不能超过3M！");
        return;
      }
      this.approve.lawGenerationHandPicUrl = URL.createObjectURL(files.raw);
      this.formImg.lawGenerationHandPic = files.raw;
    },
    handleChange5(files, fileList) {
      const isJPG = files.raw.type == "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传图片格式不符合！");
        return;
      }
      if (files.size > 1024 * 1024 * 3) {
        this.$message.error("上传图片不能超过3M！");
        return;
      }
      this.approve.certificatePassportPicUrl = URL.createObjectURL(files.raw);
      this.formImg.certificatePassportPic = files.raw;
    },
    handleChange6(files, fileList) {
      const isJPG = files.raw.type == "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传图片格式不符合！");
        return;
      }
      if (files.size > 1024 * 1024 * 3) {
        this.$message.error("上传图片不能超过3M！");
        return;
      }
      this.approve.beneficiaryCardFrontPicUrl = URL.createObjectURL(files.raw);
      this.formImg.beneficiaryCardFrontPic = files.raw;
    },
    handleChange7(files, fileList) {
      const isJPG = files.raw.type == "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传图片格式不符合！");
        return;
      }
      if (files.size > 1024 * 1024 * 3) {
        this.$message.error("上传图片不能超过3M！");
        return;
      }
      this.approve.beneficiaryCardReversePicUrl = URL.createObjectURL(
        files.raw
      );
      this.formImg.beneficiaryCardReversePic = files.raw;
    },
    handleChange8(files, fileList) {
      const isJPG = files.raw.type == "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传图片格式不符合！");
        return;
      }
      if (files.size > 1024 * 1024 * 3) {
        this.$message.error("上传图片不能超过3M！");
        return;
      }
      this.approve.beneficiaryHandPicUrl = URL.createObjectURL(files.raw);
      this.formImg.beneficiaryHandPic = files.raw;
    },
    getParam(val,type){  
      this.headers = val ;
      this.editSaveAuth()
      
    }, 
    refer() {
      this.disableds = true; 
      const fd = new FormData();
      this.formImg.businessLicensePic
        ? fd.append("businessLicensePic", this.formImg.businessLicensePic)
        : "";
      this.formImg.lawGenerationHandPic
        ? fd.append("lawGenerationHandPic", this.formImg.lawGenerationHandPic)
        : "";
      this.formImg.certificateFrontPic
        ? fd.append("certificateFrontPic", this.formImg.certificateFrontPic)
        : "";
      this.formImg.certificateReversePic
        ? fd.append("certificateReversePic", this.formImg.certificateReversePic)
        : "";
      this.formImg.certificatePassportPic
        ? fd.append(
            "certificatePassportPic",
            this.formImg.certificatePassportPic
          )
        : "";
      this.formImg.beneficiaryCardFrontPic
        ? fd.append(
            "beneficiaryCardFrontPic",
            this.formImg.beneficiaryCardFrontPic
          )
        : "";
      this.formImg.beneficiaryCardReversePic
        ? fd.append(
            "beneficiaryCardReversePic",
            this.formImg.beneficiaryCardReversePic
          )
        : "";
      this.formImg.beneficiaryHandPic
        ? fd.append("beneficiaryHandPic", this.formImg.beneficiaryHandPic)
        : "";
      this.$refs.approve.validate((valid) => {
        if (!valid) return;
 
        let list = JSON.parse(JSON.stringify(this.approve));
        delete list.beneficiaryCardFrontPic;
        delete list.beneficiaryCardFrontPicUrl;
        delete list.beneficiaryCardReversePic;
        delete list.beneficiaryCardReversePicUrl;
        delete list.beneficiaryHandPic;
        delete list.beneficiaryHandPicUrl;
        delete list.businessLicensePic;
        delete list.businessLicensePicUrl;
        delete list.certificateFrontPic;
        delete list.certificateFrontPicUrl;
        delete list.certificatePassportPic;
        delete list.certificatePassportPicUrl;
        delete list.certificateReversePic;
        delete list.certificateReversePicUrl;
        delete list.lawGenerationHandPic;
        delete list.lawGenerationHandPicUrl;

        for (let k in list) {
          if (list[k] != [] && list[k] != null && list[k] != "") {
            fd.append(k, list[k]);
          }
        }
        this.fd = fd
        if(this.userInfo&&this.userInfo.verifyApi){
          this.verArry =  this.userInfo.verifyApi.split(',');
          if(this.verArry.includes('/api/photon/saveAuthRecordKyc')){
            this.$refs.codeRef.openDialog(); 
          }else{
            this.editSaveAuth();
          }
        }   
        // service
        //   .post("/api/photon/saveAuthRecordKyc", fd)
        //   .then((res) => { 
        //     if (res.code == 0) {
        //       this.$message.success("提交成功，请等待审核...");
        //       this.isAcive = 5;
        //       this.companyInfo(); 
        //     } else {
        //       this.disableds = false;
        //       this.$message.error(spStr(res.msg, "PhotonPay", ""));
        //     }
        //   })
        //   .catch((err) => {
        //     this.disableds = false;
        //     this.$message.error(err);
        //   });
      });
    },  
   editSaveAuth() {
      reqJson('post',"/api/photon/saveAuthRecordKyc", this.fd,{
        headers:{
          ...this.headers
        }
      }).then((res) => { 
        this.disableds = false;
        if (res.code == 0) { 
          this.$message.success("提交成功，请等待审核...");
          this.isAcive = 5;
          this.companyInfo(); 
        } else {
         
          this.$message.error(spStr(res.msg, "PhotonPay", ""));
        }
      })
      .catch((err) => {
        this.disableds = false;
        this.$message.error(err);
      });    
    }

  },
};
</script>

<style scoped>
#main .box-card .el-form-item {
  display: inline-block;
  margin-left: 5%;
}
h2 {
  margin: 0;
}
.item .item-name {
  font-size: 35px;
  line-height: 80px;
}
.box-card .item .item-ts {
  font-size: 14px;
  font-weight: 500;
  color: #949494;
}
/deep/.el-tabs .el-tabs__nav-wrap {
  padding: 0 20px;
}
/deep/.el-tabs .el-tabs__active-bar {
  /* display: none; */
  background: #2e3094;
}
/deep/.el-tabs .el-tabs__item:hover{
  color: #2e3094;
}
/deep/.el-tabs .el-tabs__item.is-active {
  /* background: #c6c7e2; */
  padding: 0 20px !important;
  color: #2e3094;
  /* border-radius: 12px 12px 0 0; */
}

.select10 .el-select,
.select10 .el-input {
  width: 100%;
}
.img_sm {
  width: 30px;
  margin-right: 20px;
  display: inline-block;
}
.bor_sm {
  display: inline-block;
  width: 230px;
  padding: 20px 0;
  color: #000;
  border-radius: 10px;
  border: 1px solid #353535;
}
.smActive {
  background-color: #2e309445;
  border-color: #2e3094;
  color: #2e3094;
}
.rad_sm {
  width: 25px;
  height: 25px;
  line-height: 25px;
  margin: 0px auto 10px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background-color: #000;
  border-radius: 50%;
}

.smActive .rad_sm {
  background-color: #2e3094;
}
.el-upload__text {
  position: absolute;
  width: 100%;
  z-index: 999;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
.el-upload .avatar {
  /* margin-left: -15px;
  margin-top: -15px; */
  /* width: 180px;
  height: 180px; */
  width: 100%;
  height: 100%;
  display: block;
}
/deep/.el-upload-dragger,
.el-upload img {
  width: 360px;
  height: 215px !important;
}
.el-image {
  /* margin-top: 20px; */
  /* width: 180px;
  height: 180px; */
  width: 360px;
  height: 215px;
}
</style>
